<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<base href="<%=basePath%>" />

		<title>键帽配色</title>
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="cache-control" content="no-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
		<meta http-equiv="description" content="This is my page" />
		<jsp:include page="/page/common/util/commonCssLoder.jsp" flush="true" />
		
		<jsp:include page="/page/common/util/jquery-loder.jsp" flush="true" />
		
		<link rel="stylesheet" type="text/css" href="css/open/keybord/keycapColor.css" />
		
		<script type="text/javascript" src="js/open/keybord/colorData.js"></script>
		<script type="text/javascript" src="js/open/keybord/keycapColor.js"></script>
		
	</head>

	<body class="bodyContentMiddle">
		<div class="bodyMiniWidth">
			<table class="pageBodyTable" align="center" cellpadding="0" cellspacing="0">
				<tr class="pageHeaderPartRow"><!-- 页眉 -->
					<td>
						<div>
							<!-- 用户登录信息 -->
							<jsp:include page="/page/common/basic/loginUser.jsp" flush="true" />
						</div>
						<div>
							<!-- 功能菜单 -->
							<jsp:include page="/page/common/basic/menuToolbar.jsp" flush="true" />
						</div>
					</td>
				</tr>
				<tr class="pageContentPartRow"><!-- 正文 -->
					<td>
						<div class="contentMiddleRevis" style="width: 1400px;">
							
							<!-- ===================================================================================================================== -->
							
							<div style="margin-top: 20px; height: 45px;">
								<table align="right">
									<tr valign="bottom">
										<td>
											<div>键盘背景:</div>
										</td>
										<td>
											<div class="titleTips">(可以是颜色(如：#FF0000);也可以是图片链接(如:http://xxxx.com/xxx.jpg))</div>
											<input type="text" id="keybordBg" style="width: 480px;"/>
											
										</td>
										<td>
											按键背光颜色：
										</td>
										<td>
											<div class="titleTips">(必须是颜色(如：#FF0000))</div>
											<input type="text" id="keyLight" style="width: 180px;"/>
										</td>
										<td>
											<input type="button" value="更改" onclick="changeBgcolor()"/>
										</td>
										<td width="250px"></td>
										<td>
											<input type="button" value="显示全部颜色" onclick="showAllInput()"/>
										</td>
										
										<td>
											<input type="button" value="全部渲染" onclick="renderingAllColor()"/>
										</td>
										
									</tr>
								</table>
								
								
							</div>
							
							<div id="colorKeyDIv" style="background: url(img/key/chuYin.jpg) repeat; width: 1388px; border: 4px solid black; padding: 20px; margin-top: 20px;">
								
								<div>
									<!-- esc 区 -->
									<div class="keyArea" style="width: 62px;">
										<div class="oneKeyRow">
											<div class="keycapBlock keySimple" id="esc">Esc</div>
										</div>
									</div>
									
									<!-- F1 - F4区 -->
									<div class="keyArea" style="width: 248px; margin-left: 60px;">
										<div class="oneKeyRow">
											<div class="keycapBlock keySimple" id="f1">F1</div>
											<div class="keycapBlock keySimple" id="f2">F2</div>
											<div class="keycapBlock keySimple" id="f3">F3</div>
											<div class="keycapBlock keySimple" id="f4">F4</div>
										</div>
									</div>
									
									<!-- F5 - F8区 -->
									<div class="keyArea" style="width: 248px; margin-left: 28px;">
										<div class="oneKeyRow">
											<div class="keycapBlock keySimple" id="f5">F5</div>
											<div class="keycapBlock keySimple" id="f6">F6</div>
											<div class="keycapBlock keySimple" id="f7">F7</div>
											<div class="keycapBlock keySimple" id="f8">F8</div>
											
										</div>
									</div>
									
									<!-- F9 - F12区 -->
									<div class="keyArea" style="width: 248px; margin-left: 28px;">
										<div class="oneKeyRow">
											<div class="keycapBlock keySimple" id="f9">F9</div>
											<div class="keycapBlock keySimple" id="f10">F10</div>
											<div class="keycapBlock keySimple" id="f11">F11</div>
											<div class="keycapBlock keySimple" id="f12">F12</div>
											
										</div>
									</div>
									
									<!-- print 功能区 -->
									<div class="keyArea" style="width: 186px; margin-left: 10px;">
										<div class="oneKeyRow">
											<div class="keycapBlock keySimple" id="prtsc">PrtSc</div>
											<div class="keycapBlock keySimple" id="scroll">Scroll</div>
											<div class="keycapBlock keySimple" id="pause">Pause</div>
											
										</div>
									</div>
									
									<!-- 指示灯 -->
									<div style="margin-left: 10px; width: 237px; height: 63px; float: left;">
										<img alt="" src="img/key/filco.gif" />
									</div>
								</div>
								
								<div style="clear: both;"></div>
								<!-- ========== 一大行 ============ -->
								
								<div style="margin-top: 10px;">
									<div style="width: 930px; float: left;">
										<!-- 字母区 -->
										<div class="keyArea">
											<div class="oneKeyRow">
												<div class="keycapBlock keySimple" id="wave">`~</div>
												<div class="keycapBlock keySimple" id="top-1">1</div>
												<div class="keycapBlock keySimple" id="top-2">2</div>
												<div class="keycapBlock keySimple" id="top-3">3</div>
												<div class="keycapBlock keySimple" id="top-4">4</div>
												<div class="keycapBlock keySimple" id="top-5">5</div>
												<div class="keycapBlock keySimple" id="top-6">6</div>
												<div class="keycapBlock keySimple" id="top-7">7</div>
												<div class="keycapBlock keySimple" id="top-8">8</div>
												<div class="keycapBlock keySimple" id="top-9">9</div>
												<div class="keycapBlock keySimple" id="top-0">0</div>
												<div class="keycapBlock keySimple" id="top-subtract">-</div>
												<div class="keycapBlock keySimple" id="top-equal">=</div>
												<div class="keycapBlock partMain" id="top-bak" style="width: 120px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 100px;">←Bak</div>
													<div class="partRight"></div>
												</div>
											</div>
											
											<div class="oneKeyRow">
												<div class="keycapBlock partMain" id="word-tab" style="width: 89px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 69px;">Tab</div>
													<div class="partRight"></div>
												</div>
												<div class="keycapBlock keySimple" id="word-q">Q</div>
												<div class="keycapBlock keySimple" id="word-w">W</div>
												<div class="keycapBlock keySimple" id="word-e">E</div>
												<div class="keycapBlock keySimple" id="word-r">R</div>
												<div class="keycapBlock keySimple" id="word-t">T</div>
												<div class="keycapBlock keySimple" id="word-y">Y</div>
												<div class="keycapBlock keySimple" id="word-u">U</div>
												<div class="keycapBlock keySimple" id="word-i">I</div>
												<div class="keycapBlock keySimple" id="word-o">O</div>
												<div class="keycapBlock keySimple" id="word-p">P</div>
												<div class="keycapBlock keySimple" id="word-bracket-left">[</div>
												<div class="keycapBlock keySimple" id="word-bracket-right">]</div>
												<div class="keycapBlock partMain" id="word-slash" style="width: 91px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 71px;">\|</div>
													<div class="partRight"></div>
												</div>
											</div>
											
											<div class="oneKeyRow">
												<div class="keycapBlock partMain" id="word-caps" style="width: 114px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 94px;">Caps</div>
													<div class="partRight"></div>
												</div>
												<div class="keycapBlock keySimple" id="word-a">A</div>
												<div class="keycapBlock keySimple" id="word-s">S</div>
												<div class="keycapBlock keySimple" id="word-d">D</div>
												<div class="keycapBlock keySimple" id="word-f">F</div>
												<div class="keycapBlock keySimple" id="word-g">G</div>
												<div class="keycapBlock keySimple" id="word-h">H</div>
												<div class="keycapBlock keySimple" id="word-j">J</div>
												<div class="keycapBlock keySimple" id="word-k">K</div>
												<div class="keycapBlock keySimple" id="word-l">L</div>
												<div class="keycapBlock keySimple" id="word-semicolon">;</div>
												<div class="keycapBlock keySimple" id="word-quotes">"</div>
												<div class="keycapBlock partMain" id="word-enter" style="width: 128px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 108px;">Enter</div>
													<div class="partRight"></div>
												</div>
											</div>
											
											<div class="oneKeyRow">
												<div class="keycapBlock partMain" id="word-shift-left" style="width: 151px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 127px;">Shift</div>
													<div class="partRight"></div>
												</div>
												<div class="keycapBlock keySimple" id="word-z">Z</div>
												<div class="keycapBlock keySimple" id="word-x">X</div>
												<div class="keycapBlock keySimple" id="word-c">C</div>
												<div class="keycapBlock keySimple" id="word-v">V</div>
												<div class="keycapBlock keySimple" id="word-b">B</div>
												<div class="keycapBlock keySimple" id="word-n">N</div>
												<div class="keycapBlock keySimple" id="word-m">M</div>
												<div class="keycapBlock keySimple" id="word-less">&lt;</div>
												<div class="keycapBlock keySimple" id="word-great">&gt;</div>
												<div class="keycapBlock keySimple" id="word-ask">?</div>
												<div class="keycapBlock partMain" id="word-shift-right" style="width: 153px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 133px;">Shift</div>
													<div class="partRight"></div>
												</div>
											</div>
											
											<div class="oneKeyRow">
												<div class="keycapBlock keySimpleBottom" id="word-ctrl-left">Ctrl</div>
												<div class="keycapBlock keySimpleBottom" id="word-win-left">田</div>
												<div class="keycapBlock keySimpleBottom" id="word-alt-left">Alt</div>
												<div class="keycapBlock partMain" id="word-space" style="width: 380px;">
													<div class="partLeft"></div>
													<div class="partHeng" style="width: 360px;">Space</div>
													<div class="partRight"></div>
												</div>
												
												<div class="keycapBlock keySimpleBottom" id="word-alt-right">Alt</div>
												<div class="keycapBlock keySimpleBottom" id="word-win-right">田</div>
												<div class="keycapBlock keySimpleBottom" id="word-fn">Fn</div>
												<div class="keycapBlock keySimpleBottom" id="word-ctrl-right">Ctrl</div>
											</div>
										</div>
									</div>
									
									<div style="float: left; width: 188px; margin-left: 10px;">
										<!-- 功能键 -->
										<div class="keyArea">
											<div class="oneKeyRow">
												<div class="keycapBlock keySimple" id="ins">Ins</div>
												<div class="keycapBlock keySimple" id="home">Home</div>
												<div class="keycapBlock keySimple" id="pgup">PgUp</div>
											</div>
											
											<div class="oneKeyRow">
												<div class="keycapBlock keySimple" id="del">Del</div>
												<div class="keycapBlock keySimple" id="end">End</div>
												<div class="keycapBlock keySimple" id="pgdn">PgDn</div>
												
											</div>
											
										</div>
									
										<!-- 方向键 -->
										<div class="keyArea" style="padding-bottom: 0; margin-top: 60px; margin-left: 64px;">
											<div class="oneKeyRow">
												<div class="keycapBlock keySimple" id="direction-up">↑</div>
											</div>
										</div>
										<div class="keyArea">
											<div class="oneKeyRow">
												<div class="keycapBlock keySimple" id="direction-left">←</div>
												<div class="keycapBlock keySimple" id="direction-down">↓</div>
												<div class="keycapBlock keySimple" id="direction-right">→</div>
												
											</div>
										</div>
									</div>
									
									<div style="float: left; width: 250px; margin-left: 10px;">
										<!-- 小键盘 -->
										
										<div class="keyArea">
											<div style="width: 186px; float: left;">
												<div class="oneKeyRow">
													<div class="keycapBlock keySimple" id="num-numlk">Num</div>
													<div class="keycapBlock keySimple" id="num-slash">/</div>
													<div class="keycapBlock keySimple" id="num-star">*</div>
												</div>
												
												<div class="oneKeyRow">
													<div class="keycapBlock keySimple" id="num-7">7</div>
													<div class="keycapBlock keySimple" id="num-8">8</div>
													<div class="keycapBlock keySimple" id="num-9">9</div>
													
												</div>
												
												<div class="oneKeyRow">
													<div class="keycapBlock keySimple" id="num-4">4</div>
													<div class="keycapBlock keySimple" id="num-5">5</div>
													<div class="keycapBlock keySimple" id="num-6">6</div>
													
												</div>
												
												<div class="oneKeyRow">
													<div class="keycapBlock keySimple" id="num-1">1</div>
													<div class="keycapBlock keySimple" id="num-2">2</div>
													<div class="keycapBlock keySimple" id="num-3">3</div>
													
												</div>
												
												<div class="oneKeyRow">
													<div class="keycapBlock partMain" id="num-0" style="width: 122px;">
														<div class="partLeft"></div>
														<div class="partHeng" style="width: 102px;">0</div>
														<div class="partRight"></div>
													</div>
													<div class="keycapBlock keySimple" id="num-point">.</div>
													
												</div>
											</div>
											
											<div style="width: 62px; float: left;">
												<div class="oneKeyRow">
													<div class="keycapBlock keySimple" id="num-subtract">-</div>
													<div class="keycapBlock partMain" id="num-plus" style="height: 122px;">
														<div class="partTop"></div>
														<div class="partShu" style="height: 101px;">+</div>
														<div class="partBottom"></div>
													</div>
													<div class="keycapBlock partMain" id="num-enter" style="height: 122px;">
														<div class="partTop"></div>
														<div class="partShu" style="height: 101px;">Enter</div>
														<div class="partBottom"></div>
													</div>
												</div>
											</div>
											
											
											
										</div>
									</div>
								</div>
								
								<div style="clear: both;"></div>
								
								
							</div>
							<div style="margin-top: 20px;">
								<div class="titleTips">颜色转换工具</div>
								<table>
									<tr>
										<td>
											R<input type="text" id="testRed" />
										</td>
										
										<td>
											G<input type="text" id="testGreen" />
										</td>
										
										<td>
											B<input type="text" id="testBlue" />
										</td>
										
										<td>
											颜色值<input type="text" id="testColor" readonly="readonly"/>
										</td>
									</tr>
								</table>
							
							</div>
							
							
							<div id="exportArea" style="margin-top: 20px;">
							
								<table>
									<tr valign="top">
										<td>
											<textarea style="width: 1300px; height: 300px;" id="colorDataArea"></textarea>
										</td>
										
										<td>
											<input type="button" value="导出颜色" onclick="exportColorData()"/>
											<br/><br/><br/>
											<input type="button" value="导入颜色" onclick="importrColorData()"/>
										</td>
									</tr>
								</table>
							
							</div>
							
							<div>
								<div class="titleTips">小提示：</div>
								<div class="titleTips" style="margin-left: 45px;">
									1. 鼠标悬浮按键，可显示当前按键id
									<br/>
									2. 按键id是用于数据导入导出时，按键的唯一索引值
									<br/>
									3. 单击键帽可以输入键帽颜色 RGB 值
									<br/>
									4. 颜色值规则为RGB(red, green, blue)取值，取值范围为0-255，并且需要将该数字转换成16进制，前面加 "#"。
									如：r: 255, g: 255, b: 255 转换之后为#FFFFFF,其中如果单个数值不够两位，需补0
									<br/>
									5. 按键颜色可以省略 "#"， 但其他设置如果是颜色，必须加 "#"
									<br/>
									6. 颜色生成方法可根据 windows 的画图工具，相信这点小问题难不住 diyer
									<br/>
									7. 颜色格式转换可以用<a href="outside/software/getcolor.exe" target="_blank">屏幕拾色器</a>转换
									<br/>
									<img alt="" src="img/key/getcolor.gif" />
									<br/>
									
								</div>
								
							</div>
							
							<br/><br/><br/><br/><br/><br/><br/><br/><br/>
							<!-- ===================================================================================================================== -->
						</div>
					</td>
				</tr>
				<tr class="pageFooterPartRow"><!-- 页脚 -->
					<td>
						<div>
							<jsp:include page="/page/common/basic/copyright.jsp" flush="true" />
						</div>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
